import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:gluz/app/data/identity_entity.dart';

import '../controllers/register_info_controller.dart';
import '../../../../common/common_button.dart';
import '../../../../utils/colors.dart';

class RegisterInfoView extends GetView<RegisterInfoController> {
  const RegisterInfoView({super.key});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      backgroundColor: Colors.white,
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Color(0xFFF0F8FF), Colors.white],
            stops: [0.0, 0.3],
          ),
        ),
        child: SafeArea(
          child: Column(
            children: [
              // 顶部状态栏占位
              const SizedBox(height: 20),
              
              // 主要内容区域
              Expanded(
                child: SingleChildScrollView(
                  padding: const EdgeInsets.symmetric(horizontal: 20),
                  child: GetBuilder<RegisterInfoController>(builder: (controller) {
                    return Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        // 公司/个人名称
                        _buildSectionTitle('公司/个人名称'.tr, isRequired: true),
                        const SizedBox(height: 8),
                        _buildTextField(
                          hintText: '请输入公司/个人名称'.tr,
                          onChanged: (value) => controller.companyName.value = value,
                        ),
                        const SizedBox(height: 24),

                        // 上传用户头像
                        _buildSectionTitle('上传用户头像'.tr),
                        const SizedBox(height: 8),
                        _buildAvatarUpload(),
                        const SizedBox(height: 24),

                        // 选择国籍
                        _buildSectionTitle('选择国籍'.tr),
                        const SizedBox(height: 8),
                        _buildCountrySelector(),
                        const SizedBox(height: 24),

                        // 所在地区
                        _buildSectionTitle('所在地区'.tr, isRequired: true),
                        const SizedBox(height: 8),
                        _buildAreaTextField(
                          hintText: '请输入所在地区'.tr,
                          onChanged: (value) => {},
                        ),
                        const SizedBox(height: 24),

                        // 选择身份
                        _buildSectionTitle('选择身份'.tr, isOptional: true),
                        const SizedBox(height: 8),
                        _buildIdentitySelector(),
                        const SizedBox(height: 16),

                        // 提示文字
                        Text(
                          '注:身份、国籍确定后不可修改,请您根据实际情况进行选择'.tr,
                          style: TextStyle(
                            color: Colors.red,
                            fontSize: 12,
                          ),
                        ),
                        const SizedBox(height: 40),
                      ],
                    );
                  }),
                ),
              ),
              
              // 底部确认按钮
              Container(
                padding: const EdgeInsets.all(20),
                child: GLGradientButton(
                  onPressed: controller.submitForm,
                  child: const Text(
                    '确定',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 构建标题
  Widget _buildSectionTitle(String title, {bool isRequired = false, bool isOptional = false}) {
    return Row(
      children: [
        Text(
          title,
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
            color: AppColors.color_333333,
          ),
        ),
        if (isRequired) ...[
          const SizedBox(width: 8),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
            decoration: BoxDecoration(
              color: AppColors.color_278AFF,
              borderRadius: BorderRadius.circular(10),
            ),
            child: const Text(
              '必填',
              style: TextStyle(
                color: Colors.white,
                fontSize: 10,
              ),
            ),
          ),
        ],
        if (isOptional) ...[
          const SizedBox(width: 8),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
            decoration: BoxDecoration(
              color: AppColors.color_278AFF,
              borderRadius: BorderRadius.circular(10),
            ),
            child: const Text(
              '必选',
              style: TextStyle(
                color: Colors.white,
                fontSize: 10,
              ),
            ),
          ),
        ],
      ],
    );
  }

  // 构建输入框
  Widget _buildTextField({
    required String hintText,
    required Function(String) onChanged,
  }) {
    return Container(
      height: 48,
      decoration: BoxDecoration(
        color: const Color(0xFFF5F5F5),
        borderRadius: BorderRadius.circular(8),
      ),
      child: TextField(
        onChanged: onChanged,
        decoration: InputDecoration(
          hintText: hintText,
          hintStyle: const TextStyle(
            color: Color(0xFF999999),
            fontSize: 14,
          ),
          border: InputBorder.none,
          contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
        ),
      ),
    );
  }

  Widget _buildAreaTextField({
    required String hintText,
    required Function(String) onChanged,
  }) {
    return Container(
      height: 48,
      decoration: BoxDecoration(
        color: const Color(0xFFF5F5F5),
        borderRadius: BorderRadius.circular(8),
      ),
      child: TextField(
        controller: controller.areaTextEditController,
        onTap: controller.onTapArea,
        onChanged: onChanged,
        readOnly: true,
        // enabled: false,
        decoration: InputDecoration(
          hintText: hintText,
          hintStyle: const TextStyle(
            color: Color(0xFF999999),
            fontSize: 14,
          ),
          border: InputBorder.none,
          contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
        ),
      ),
    );
  }

  // 构建头像上传
  Widget _buildAvatarUpload() {
    return Obx(() {
      return GestureDetector(
        onTap: controller.selectAvatar,
        child: Container(
          width: 80,
          height: 80,
          decoration: BoxDecoration(
            color: const Color(0xFFF5F5F5),
            borderRadius: BorderRadius.circular(8),
          ),
          child: controller.userAvatar.value != null
              ? ClipRRect(
                  borderRadius: BorderRadius.circular(8),
                  child: CachedNetworkImage(
                    imageUrl: controller.userAvatar.value!,
                    fit: BoxFit.cover,
                  ),
                )
              : const Icon(
                  Icons.camera_alt,
                  color: Color(0xFF999999),
                  size: 32,
                ),
        ),
      );
    });
  }

  // 构建国籍选择器
  Widget _buildCountrySelector() {
    final selectedCountry = controller.loginController.selectedCountry;
    return GestureDetector(
      onTap: controller.selectCountry,
      child: Container(
        height: 40,
        padding: const EdgeInsets.symmetric(horizontal: 16),
        decoration: BoxDecoration(
          color: const Color(0xFFF0F8FF),
          border: Border.all(color: AppColors.color_278AFF, width: 1),
          borderRadius: BorderRadius.circular(12),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Image.asset(
              selectedCountry.image,
              width: 24,
              height: 16,
              fit: BoxFit.cover,
            ),
            const SizedBox(width: 8),
            Text(
              selectedCountry.name,
              style: TextStyle(
                fontSize: 14,
                color: AppColors.color_333333,
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 构建身份选择器
  Widget _buildIdentitySelector() {
    return GetBuilder<RegisterInfoController>(
      builder: (controller) {
        return LayoutBuilder(
          builder: (context, constraints) {
            final availableWidth = constraints.maxWidth;
            final itemWidth = (availableWidth - 24) / 3; // 3列布局，减去间距

            return Wrap(
              spacing: 12, // 水平间距
              runSpacing: 12, // 垂直间距
              children: controller.identityOptions.map((identity) =>
                SizedBox(
                  width: itemWidth,
                  child: _buildIdentityButton(identity),
                ),
              ).toList(),
            );
          },
        );
      }
    );
  }

  // 构建身份按钮
  Widget _buildIdentityButton(IdentityEntity identity) {
    return Obx(() {
      final isSelected = controller.selectedIdentity.value == identity;
      return GestureDetector(
        onTap: () => controller.selectIdentity(identity),
        child: Container(
          height: 40,
          decoration: BoxDecoration(
            color: isSelected ? const Color(0xFFF0F8FF) : const Color(0xFFF5F5F5),
            border: Border.all(
              color: isSelected ? AppColors.color_278AFF : Colors.transparent,
              width: 1,
            ),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Center(
            child: Text(
              identity.name,
              style: TextStyle(
                fontSize: 14,
                color: isSelected ? AppColors.color_278AFF : AppColors.color_333333,
                fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
              ),
            ),
          ),
        ),
      );
    });
  }
}
